document.addEventListener('DOMContentLoaded', function() {
    // 加载动画
    setTimeout(function() {
        document.querySelector('.loader-container').style.opacity = '0';
        setTimeout(function() {
            document.querySelector('.loader-container').style.display = 'none';
        }, 500);
    }, 2000);
    
    // 头部滚动效果
    const header = document.querySelector('.main-header');
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });
    
    // 作品图像加载
    const workImages = document.querySelectorAll('.work-image');
    workImages.forEach(image => {
        const imageUrl = image.getAttribute('data-src');
        image.style.backgroundImage = `url('${imageUrl}')`;
        image.style.backgroundSize = 'cover';
        image.style.backgroundPosition = 'center';
    });
    
    // 创建水墨动画效果
    createInkAnimation();
    
    // 作品筛选功能
    const filterButtons = document.querySelectorAll('.filter-btn');
    const workItems = document.querySelectorAll('.work-item');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 移除所有按钮的active类
            filterButtons.forEach(btn => btn.classList.remove('active'));
            // 为当前点击的按钮添加active类
            this.classList.add('active');
            
            const filter = this.getAttribute('data-filter');
            
            workItems.forEach(item => {
                if (filter === 'all' || item.getAttribute('data-category') === filter) {
                    item.style.display = 'block';
                    setTimeout(() => {
                        item.style.opacity = '1';
                    }, 100);
                } else {
                    item.style.opacity = '0';
                    setTimeout(() => {
                        item.style.display = 'none';
                    }, 300);
                }
            });
        });
    });
    
    // 作品详情模态框
    const modal = document.getElementById('workDetailModal');
    const closeBtn = document.querySelector('.close-modal');
    
    closeBtn.addEventListener('click', function() {
        modal.style.display = 'none';
    });
    
    window.addEventListener('click', function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });
    
    // 作品详情数据
    const worksData = {
        1: {
            title: '山水无尽',
            category: '山水系列',
            year: '2023',
            technique: '数字绘画',
            description: '数字山水长卷，展现中国传统山水画的意境与现代数字技术的完美结合。作品通过程序算法模拟水流与墨迹的自然扩散，展现山水的动态变化与永恒之美。',
            techniques: ['数字绘画', '程序算法', '动态渲染'],
            inspiration: '以中国传统山水画为灵感，结合数字技术创作的动态山水长卷。作品探索山水的动态变化与永恒之美，展现自然与艺术的和谐统一。'
        },
        2: {
            title: '墨竹清风',
            category: '墨竹系列',
            year: '2023',
            technique: '交互式数字装置',
            description: '交互式墨竹，随风摇曳，光影变幻，感受传统竹文化的悠远意境。作品通过传感器捕捉观众的动作，将墨竹的形态与观众的互动结合起来，创造出随风摇曳的竹林意境。',
            techniques: ['传感器技术', '实时渲染', '交互编程'],
            inspiration: '以中国传统墨竹为灵感，作品通过传感器捕捉观众的动作，将墨竹的形态与观众的互动结合起来，探索人与自然的和谐关系。'
        },
        3: {
            title: '云山雾罩',
            category: '抽象水墨',
            year: '2022',
            technique: '抽象数字水墨',
            description: '动态水墨云雾，探索传统水墨在数字空间中的全新表现方式。作品通过粒子系统模拟云雾的流动与变化，创造出神秘而深邃的视觉体验。',
            techniques: ['程序化生成', '粒子系统', '动态渲染'],
            inspiration: '作品探索传统水墨在数字空间中的全新表现方式，通过粒子系统模拟云雾的流动与变化，创造出神秘而深邃的视觉体验。'
        },
        4: {
            title: '云海日出',
            category: '山水系列',
            year: '2023',
            technique: '数字水墨长卷',
            description: '数字水墨山水，展现云海日出的壮丽景象，传统与现代的完美交融。作品通过数字技术再现了传统山水画的意境，同时加入了动态元素，使观者能够感受到山水的生命力。',
            techniques: ['数字绘画', '3D建模', '动态渲染'],
            inspiration: '作品描绘云海日出的壮丽景象，将中国传统山水画的意境与现代数字技术相结合，创造出震撼人心的视觉体验。'
        },
        5: {
            title: '竹影婆娑',
            category: '墨竹系列',
            year: '2023',
            technique: '数字墨竹装置',
            description: '数字墨竹装置艺术，光影交错的竹影营造出清幽空灵的意境，展现竹文化的精神内涵。',
            techniques: ['3D建模', '灯光编程', '交互设计'],
            inspiration: '作品通过数字技术重新诠释中国传统竹文化，光影交错的竹影营造出清幽空灵的意境，展现竹文化的精神内涵。'
        },
        6: {
            title: '墨韵空间',
            category: '交互装置',
            year: '2022',
            technique: '沉浸式互动装置',
            description: '沉浸式水墨互动体验，观众的移动将改变水墨的流动与变化，创造出独特的艺术体验，使观众成为创作过程的一部分。',
            techniques: ['传感器技术', '实时渲染', '交互编程'],
            inspiration: '作品创造了一个沉浸式的水墨互动空间，观众的移动将改变水墨的流动与变化，探索人与艺术的互动关系。'
        },
        7: {
            title: '墨色涟漪',
            category: '抽象水墨',
            year: '2023',
            technique: '数字水墨动画',
            description: '数字水墨动态作品，模拟墨汁在水中的扩散与融合，探索色彩与形态的无限可能，展现水墨艺术的动态美学。',
            techniques: ['程序化生成', '粒子系统', '动态渲染'],
            inspiration: '作品模拟墨汁在水中的扩散与融合，探索色彩与形态的无限可能，展现水墨艺术的动态美学。'
        },
        8: {
            title: '山水琴韵',
            category: '交互装置',
            year: '2023',
            technique: '声音交互装置',
            description: '声音交互水墨装置，观众的语音将转化为山川河流的变化，创造视听一体的沉浸式艺术体验，使观众能够从多角度欣赏水墨艺术的魅力。',
            techniques: ['声音识别', '实时渲染', '交互编程'],
            inspiration: '作品将声音与水墨艺术相结合，观众的语音将转化为山川河流的变化，创造视听一体的沉浸式艺术体验。'
        }
    };
    
    // 查看作品详情
    const viewWorkButtons = document.querySelectorAll('.view-work');
    
    viewWorkButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const workId = this.getAttribute('data-id');
            const work = worksData[workId];
            
            if (work) {
                // 填充模态框内容
                document.querySelector('.detail-title').textContent = work.title;
                document.querySelector('.detail-category').textContent = work.category;
                document.querySelector('.detail-year').textContent = `创作年份: ${work.year}`;
                document.querySelector('.detail-technique').textContent = `创作技术: ${work.technique}`;
                document.querySelector('.detail-description').textContent = work.description;
                
                // 填充创作技术列表
                const techniquesHTML = work.techniques.map(tech => 
                    `<span class="technique-item">${tech}</span>`
                ).join('');
                document.querySelector('.techniques-list').innerHTML = techniquesHTML;
                
                // 填充创作灵感
                document.querySelector('.detail-inspiration p').textContent = work.inspiration;
                
                // 设置图片
                const detailImage = document.querySelector('.detail-image');
                detailImage.src = this.closest('.work-item').querySelector('.work-image').getAttribute('data-src');
                detailImage.alt = work.title;
                
                // 显示模态框
                modal.style.display = 'block';
                document.body.style.overflow = 'hidden'; // 防止背景滚动
            }
        });
    });
});

// 作品筛选功能
document.addEventListener('DOMContentLoaded', function() {
    const filterButtons = document.querySelectorAll('.filter-btn');
    const workItems = document.querySelectorAll('.work-item');

    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 移除所有按钮的active类
            filterButtons.forEach(btn => btn.classList.remove('active'));
            // 给当前点击的按钮添加active类
            this.classList.add('active');

            const filterValue = this.getAttribute('data-filter');

            workItems.forEach(item => {
                if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });
});
// 作品筛选功能
document.addEventListener('DOMContentLoaded', function() {
    const filterButtons = document.querySelectorAll('.filter-btn');
    const workItems = document.querySelectorAll('.work-item');
    const loadMoreButtons = document.querySelectorAll('.load-more-btn');
    let isLoaded = false;

    // 初始加载每个系列的前3个作品
    function showInitialWorks(category) {
        workItems.forEach((item) => {
            if (item.getAttribute('data-category') === category) {
                const categoryItems = document.querySelectorAll(`.work-item[data-category="${category}"]`);
                const categoryIndex = Array.from(categoryItems).indexOf(item);
                if (categoryIndex >= 3) {
                    item.style.display = 'none';
                } else {
                    item.style.display = 'block';
                }
            } else {
                item.style.display = 'none'; // 隐藏其他系列的作品
            }
        });
    }

    // 显示指定系列的所有作品
    function showAllCategoryWorks(category) {
        workItems.forEach((item) => {
            if (item.getAttribute('data-category') === category) {
                item.style.display = 'block';
            } else {
                item.style.display = 'none'; // 隐藏其他系列的作品
            }
        });
    }

    // 显示所有系列的所有作品
    function showAllWorks() {
        workItems.forEach(item => {
            item.style.display = 'block';
        });
    }

    // 筛选功能
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 移除所有按钮的active类
            filterButtons.forEach(btn => btn.classList.remove('active'));
            // 给当前点击的按钮添加active类
            this.classList.add('active');

            const filterValue = this.getAttribute('data-filter');

            // 隐藏所有加载更多按钮
            document.querySelectorAll('.load-more').forEach(loadMore => {
                loadMore.style.display = 'none';
            });

            if (filterValue === 'all') {
                // 显示全部作品的加载更多按钮
                const allLoadMore = document.querySelector('.load-more[data-category="all"]');
                if (allLoadMore) {
                    allLoadMore.style.display = 'block';
                }
                showInitialWorks(filterValue);
            } else {
                // 显示对应系列的加载更多按钮
                const categoryLoadMore = document.querySelector(`.load-more[data-category="${filterValue}"]`);
                if (categoryLoadMore) {
                    categoryLoadMore.style.display = 'block';
                }
                showInitialWorks(filterValue);
            }

            isLoaded = false;
        });
    });

    // 加载更多功能
    loadMoreButtons.forEach(button => {
        button.addEventListener('click', function() {
            const loadMoreContainer = this.parentElement;
            const category = loadMoreContainer.getAttribute('data-category');

            if (category === 'all') {
                showAllWorks();
            } else {
                showAllCategoryWorks(category);
            }

            // 隐藏当前加载更多按钮
            loadMoreContainer.style.display = 'none';
            isLoaded = true;
        });
    });

    // 初始加载
    showInitialWorks('all');
});